<template>
    <div class="detail_module_panel">
      <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('common.modifyRecord')}}</h3>
      <!--用户修改记录-->
      <el-table class="loan_history_table" :data="tableData" style="width: 100%" :default-sort = "{prop: 'updateTime', order: 'descending'}">
        <el-table-column sortable label="修改时间" prop="updateTime" :label="$t('audit.modifyTime')" min-width="140">
          <template slot-scope="scope">{{ scope.row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column align="left" label="修改内容" prop="type" :label="$t('audit.modifyContent')" min-width="140">
          <template slot-scope="scope">{{ scope.row.type | switchType }}</template>
        </el-table-column>
        <el-table-column align="left" label="修改前" :label="$t('audit.beforeModify')" min-width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'mobile'">{{ scope.row.usedPhone }}</span>
            <div v-if="scope.row.type == 'contact'">
              <p v-if="scope.row.userContactOld.contactFirst">{{$t('common.contacts')}}1：{{ scope.row.userContactOld.contactFirst }}&nbsp;-&nbsp;{{ scope.row.userContactOld.relationshipFirst?$t('audit.relationshipList.' + scope.row.userContactOld.relationshipFirst):'--' }}&nbsp;-&nbsp;{{ scope.row.userContactOld.phoneFirst }}</p>
              <p v-if="scope.row.userContactOld.contactSecond">{{$t('common.contacts')}}2：{{ scope.row.userContactOld.contactSecond }}&nbsp;-&nbsp;{{ scope.row.userContactOld.relationshipSecond?$t('audit.relationshipList.' + scope.row.userContactOld.relationshipSecond):'--' }}&nbsp;-&nbsp;{{ scope.row.userContactOld.phoneSecond }}</p>
            </div>
            <span v-if="scope.row.type == 'job'">{{ scope.row.jobInfoOld.companyName }}&nbsp;-&nbsp;{{ scope.row.jobInfoOld.companyTel }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="修改后" :label="$t('audit.afterModify')" min-width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'mobile'">{{ scope.row.newPhone }}</span>
            <div v-if="scope.row.type == 'contact'">
              <p v-if="scope.row.userContactNew.contactFirst">{{$t('common.contacts')}}1：{{ scope.row.userContactNew.contactFirst }}&nbsp;-&nbsp;{{ scope.row.userContactNew.relationshipFirst?$t('audit.relationshipList.' + scope.row.userContactNew.relationshipFirst):'--' }}&nbsp;-&nbsp;{{ scope.row.userContactNew.phoneFirst }}</p>
              <p v-if="scope.row.userContactNew.contactSecond">{{$t('common.contacts')}}2：{{ scope.row.userContactNew.contactSecond }}&nbsp;-&nbsp;{{ scope.row.userContactNew.relationshipSecond?$t('audit.relationshipList.' + scope.row.userContactNew.relationshipSecond):'--' }}&nbsp;-&nbsp;{{ scope.row.userContactNew.phoneSecond }}</p>
            </div>
            <span v-if="scope.row.type == 'job'">{{ scope.row.jobInfoNew.companyName }}&nbsp;-&nbsp;{{ scope.row.jobInfoNew.companyTel }}</span>
          </template>
        </el-table-column>
      </el-table><!--end table-->
    </div>
</template>

<script>
  let that = null;
  export default {
    name: 'modifyRecords',
    data() {
      return {
        userId: '',
        tableData: []
      };
    },
    methods: {
      getTableData() {
        const params = {
          userId: this.userId,
        };
        this.$api.customer.getUserUpdateRecord(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && error === '00000000' && data) {
            this.tableData = [];
            const userPhoneChangeInfo = data.userPhoneChangeInfo || [];
            const userContactChangeInfo = data.userContactChangeInfo || [];
            const userJobChangeInfo = data.userJobChangeInfo || [];
            userPhoneChangeInfo.forEach( item => {
              let obj = {
                type: 'mobile',
                updateTime: item.updateTime,
                newPhone: item.newPhone,
                usedPhone: item.usedPhone
              };
              this.tableData.push(obj);
            });
            userContactChangeInfo.forEach( item => {
              let obj = {
                type: 'contact',
                updateTime: item.updateTime,
                userContactOld: JSON.parse(item.userContactOld),
                userContactNew: JSON.parse(item.userContactNew),
              };
              this.tableData.push(obj);
            });
            userJobChangeInfo.forEach( item => {
              let obj = {
                type: 'job',
                updateTime: item.updateTime,
                jobInfoOld: JSON.parse(item.jobInfoOld),
                jobInfoNew: JSON.parse(item.jobInfoNew),
              };
              this.tableData.push(obj);
            });
          }
        });
      },
    },
    filters: {
      switchType(type) {
        switch (type) {
          case 'mobile':
            return that.$t('common.mobileNumber');// 手机号码
          case 'contact':
            return that.$t('common.contactsInfo');// 联系人信息
          case 'job':
            return that.$t('common.companyInfo');// 公司信息
          default:
            return '';
        }
      }
    },
    created() {
      that = this;
      if (this.$route.params.id) {
        this.userId = this.$route.params.id;
        this.getTableData();
      }
    },
  };
</script>

<style scoped>

</style>
